<template>
	<div class="promo-page">
		<Head navTitle="推广码" />
		<div class="page-container ">
			<div class="t-panel">
				<div class="t-row flex-center">
					<div class="flex_bd">
						<div class="item-label">邀请码</div>
						<div class="item">3B9ACA20</div>
					</div>
					<button type="button" class="btn btn-copy" data-clipboard-text="3B9ACA20"
						@click="copy()">复制</button>
				</div>
				<div class="t-row flex-center">
					<div class="flex_bd">
						<div class="item-label">推广链接</div>
						<div class="item">https://www.pioneer-football.com/</div>
					</div>
					<button type="button" class="btn btn-copy"
						data-clipboard-text="https://www.pioneer-football.com/" @click="copy()">复制</button>
				</div>
				<div class="t-code">
					<img src="../../assets/images/erweima.png">
					<p>长按二维码可保存至相册</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Clipboard from 'clipboard'
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				dialogVisible:false,
			};
		},
		methods: {
			copy() {
				var clipboard = new Clipboard('.btn-copy')
				clipboard.on('success', e => {
					console.log(e)
					this.$message({
						message: '复制成功',
						center: true,
						type: 'success',
						duration: 800
					});
					clipboard.destroy()
			
				})
				clipboard.on('error', e => {
					// 不支持复制
					console.log(e)
					clipboard.destroy()
					// 释放内存
				})
			},
		}
	}
</script>
